import React from 'react'
import Feed from './Feed'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as homeAction from '../../actions/home.action'
import { fetchAtList } from '../../actions/app.action'
import util from '../../util'
import style from './style.feed-detail'
import cx from 'classnames'

export default
@connect(({newsFeed, app}) => ({newsFeed, app}), dispatch => ({actions: bindActionCreators({ ...homeAction, fetchAtList }, dispatch)}))
class extends React.Component {

	static contextTypes = {
		router: React.PropTypes.object
	}

  componentWillReceiveProps(props) {
    if (!util.isEqual(this.props.params.feedId, props.params.feedId)) {
      this.fetchFeed(props)
    }
  }

  fetchFeed(props) {
    props = props || this.props
    this.props.actions.fetchFeed(props.params.feedId)
  }

  componentDidMount() {
    this.fetchFeed()
  }

  handleDelete() {
    this.context.router.push('/')
  }

  render() {
    const { feed, feedComment, feedUp } = this.props.newsFeed
    if (util.isNull(feed)) return null
    return (
      <div className={style['feed-item']}>
        <Feed
          className={style.root}
          {...feed}
          {...this.props}
          decodeContent={this.props.decodeContent}
          onDelete={::this.handleDelete}
        />
      </div>
    )
  }
}
